<template>
    <div ref="lotRectangle">
        <!-- 1至49模块 -->
        <div class="flex-box flex-pa flex-wp opt-pad" v-if="temp == 7">
            <div class="flex-box flex-pc wd-14" v-for="(value, key, i) in content" :key="i">
                <div :id="playType+title[0]+key.slice(1)" class="option-box-cir tx-c-wh" 
                :class="{
                    [colorCir[value]] : classFil(key) < 0,
                    'bg-c-sel' : classFil(key) > -1
                }" @click="chooseLot('', key.slice(1))">
                    <div class="mar-t-25" :class="{'tx-c-222' : classFil(key) > -1}">{{ key.slice(1) }}</div>
                    <div class="tx-s-12" :class="{'tx-c-r' : classFil(key) > -1}">{{ odds | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
        <!-- 四个一行文字模块 -->
        <div class="flex-box flex-wp opt-pad" v-if="temp == 4">
            <div class="wd-25" v-for="(value, i) in content" :key="i">
                <div :id="playType+title[0]+value[2]+value[3]" class="option-box" 
                :class="{
                    'bg-c-wh' : classFil(value) < 0,
                    'bg-c-sel' : classFil(value) > -1 
                }" @click="chooseLot(value[2], value[3])">
                    <div class="mar-t-25">{{ value[0] }}</div>
                    <div class="odds">{{ odds[value[1]] | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
        <!-- 特肖/五行模块 -->
        <div class="flex-box flex-wp opt-pad" v-if="temp == 20 || temp == 1">
            <div :class="{
                'wd-50' : temp == 20,
                'flex-f1' : temp == 1
            }" v-for="(item, i) in content" :key="i">
                <div :id="playType+title[0]+item[2]+item[3]" class="option-box" 
                :class="{
                    'bg-c-wh' : classFil(item) < 0,
                    'bg-c-sel' : classFil(item) > -1 
                }" @click="chooseLot(item[2], item[3])">
                    <div class="mar-t-25"
                    :class="{
                        'tx-c-r' : item[3].indexOf('R') > -1,
                        'tx-c-b' : item[3].indexOf('B') > -1,
                        'tx-c-g' : item[3].indexOf('G') > -1
                    }">{{ item[0] }}</div>
                    <div class="flex-bap">
                        <div class="circle-min" 
                            v-for="(num, n) in item[4]" 
                            :key="n" 
                            :class="[colorCir[c1z49Cont['1'+num]]]"
                        >{{ num }}</div>
                    </div>
                    <div class="odds">{{ odds[item[1]] | noOdds($store.state.lotStatus) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { choose } from '../../common/js/common'
import { c1z49Cont } from '../../common/js/data' 
export default {
    data () {
        return {
            c1z49Cont : c1z49Cont(),
            colorCir : {
                R : 'circle-R', B : 'circle-B', G : 'circle-G'
            }
        }
    },
    created () {
    },
    props: {
        title : Array,
        odds : [Object, String],
        content : [Object, Array],
        playType : String,
        temp : Number
    }, 
    filters : {
        // 封盘时不显示赔率
        noOdds : function(value, status){
            if(status == 1){
                return value
            }else{
                return '--'
            }
        }
    },
    methods : {
        // 选择彩票玩法
        chooseLot (playType, content) {
            choose(this.playType, this.title, playType, content)
        },
        classFil (data) {
            let id = ''
            if(typeof data == 'object'){
                id = this.playType+this.title[0]+data[2]+data[3]
            }else{
                id = this.playType+this.title[0]+data.slice(1)
            }
            return this.$store.state.lotOptions.indexOf(id)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>